@layer components {
  a.nav-link.active {
    @apply text-primary;
  }

  .side-navigator-item {
    @apply relative cursor-pointer hover:text-primary mb-1;

    &.collapsed {
      @apply hover:shadow-b;

      a.nav-link.active {
        @apply bg-gray-5;

        &::after {
          content: "";
          width: 1px;
          height: 16px;
          bottom: 12;
          right: 0%;

          @apply absolute bg-primary;
        }
      }
    }
  }

  a.nav-link {
    @apply text-gray-100 no-underline hover:text-primary w-full;
  }
}
